<template>
  <div class="login" v-loading="loading"
       element-loading-text="努力登录中,请稍等..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="haibei-login">
      <dl class="tc">
        <dt><img src="/static/images/logo.png" width="80" alt=""></dt>
        <dd class="mt10">
          <h3 class="white">海贝管理端登录</h3>
        </dd>
      </dl>
      <div class="form mt20">
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
          <el-form-item label="" prop="userName">
            <el-input v-model="loginForm.userName" placeholder="请输入帐号"></el-input>
          </el-form-item>
          <el-form-item label="" prop="userPassword">
            <el-input v-model="loginForm.userPassword" type="password" @keyup.enter.native="onSubmitLogin('loginForm')"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitLogin('loginForm')" class="w-100">登录</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="test('loginForm')" class="w-100">test</el-button>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import service from '@/service/index_c'
  import { setCookie } from '@/base/utils'

  export default {
    name: 'login',
    data() {
      return {
        loginForm: {
          userName: '',
          userPassword: ''
        },
        loading: false,
        rules: {
          userName: [
            { required: true, message: '请输入帐号', trigger: 'blur,change' },
          ],
          userPassword: [
            { required: true, message: '请输入密码', trigger: 'blur,change' },
          ]
        }
      };
    },
    methods: {
      onSubmitLogin( formName ) {
        this.$refs[ formName ].validate( ( valid ) => {
          if ( valid ) {
            service.haiBeiServerLogin( {
              account: this.loginForm.userName,
              password: this.loginForm.userPassword
            } ).then( result => {
              if ( result.success ) {
                setCookie( 'userInfo', result.result );
                this.loading = true;
                this.getAllAngentCode();
                setTimeout( () => {
                 this.$router.push( { name: 'home' } );
                }, 2000 );
              } else {
                this.$message( {
                  type: 'error',
                  message: result.msg
                } )
              }
            } );
          }

        } )
      },
      // 获取全部经纪商编码用作匹配
    async  getAllAngentCode() {
    let result = await service.haiheiAllAngentCode();
    if (result.success) {
        let list = result.result;
        setCookie('agentCode',list)
    } else {
        this.$message({
            type: 'error',
            message: '获取失败'
        })
    }
}
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: #74aae6;
    background: url('/static/images/banner1-1.jpg') center center no-repeat;
    background-size: cover;
  }

  .haibei-login {
    width: 400px;
    padding: 25px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-shadow: 1px 1px 3px #666
  }
</style>
